.card {
  box-shadow: 0 2px 4px 0 hsla(0, 0%, 0%, 0.05) !important;
  overflow: visible; /* so that outline from focus state of inner <a /> is not cut off */

  &:hover {
    &:not(.active) {
      background-color: var(--mb-color-brand-lighter) !important;
    }
  }
}

.active {
  border-color: var(--mb-color-brand) !important;
}

.link {
  border-radius: inherit;
}

.icon {
  color: var(--mb-color-brand);
}

.input {
  overflow: hidden;
  line-height: var(--mantine-line-height) !important;

  &:focus-within {
    border-color: var(--mb-color-brand) !important;
  }

  textarea {
    cursor: text;

    &:focus {
      color: var(--mb-color-text-secondary);
      background-color: var(--mb-color-brand-lighter);
    }
  }

  .active & {
    textarea {
      &:focus,
      &:hover {
        background-color: var(--mb-color-bg-white);
      }
    }
  }
}

.description {
  line-height: var(--mantine-line-height-lg) !important;
}

.name {
  line-clamp: 1;
  -webkit-line-clamp: 1;

  textarea {
    white-space: nowrap;
  }
}
